import React, { Component } from 'react'
import PropTypes from 'proptypes'
import style from './index.css'
import { hashHistory } from 'react-router'
import { connect } from 'react-redux'

class Header extends Component {
    render () {
        const { username } = this.props;
        return (
            <div className={style.header}>
                <span onClick={() => hashHistory.push('/')}>home</span>
                <input ref="input" type="text" />
                <button onClick={ () => hashHistory.push(`/search?q=${encodeURI(this.refs.input.value)}`)}>search</button>
                <span className={style.username}>{username}</span>
                {
                    !username && <button className={style.login} onClick={ () => hashHistory.push('/login')}>login</button>
                }
            </div>
        )
    }
}

function mapStateToProps (state) {
    console.log
    return {
        username: state.me.resources.username
    }
}
function mapDispatchToProps () {
    return {}
}
export default connect(mapStateToProps, mapDispatchToProps)(Header);
